<template>
  <div class="goodsDerive-basic">
    <el-dialog title="数据导入" :visible="value" width="630px" @close="close">
      <el-form ref="ruleForm" :model="form" style="width: 100%;margin: 0 auto;" :rules="rules">
        <!-- 上传 -->
        <el-form-item label="标题:" :label-width="formLabelWidth" prop="name3">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
          >
            <i class="el-icon-plus" style="text-aling:center" />
            <div slot="tip" class="el-upload__tip">支持扩展名：xls、xlsx，文件不得大于1M</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button style="background-color: #fbf4f0;border: 0px;" @click="close">取 消</el-button>
        <el-button type="primary" style="background-color: #ff6b28;border: 0px;" @click="close">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'GoodsDeriveFlag',
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '100px',
      rules: {
        name1: [
          { required: true, message: '请输入设备编号', trigger: 'blur' }
        ],
        name2: [
          { required: true, message: '请选择工单类型', trigger: 'blur' },
          { type: 'date', required: true, message: '请选择工单类型', trigger: 'change' }
        ],
        name3: [
          { required: true, message: '请选择运营人员', trigger: 'blur' },
          { type: 'date', required: true, message: '请选择运营人员', trigger: 'change' }
        ],
        name4: [
          { required: true, message: '请输入备注', trigger: 'blur' },
          { min: 1, max: 40, message: '长度在 1 到 40 个字符', trigger: 'blur' }
        ]
      },
      replenishDetail: false,
      tableData: [],
      num: 1
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    close() {
      // 通知父组件关闭弹窗
      this.$emit('input', false)
      // 只对有校验的表单才会清空
      // this.$refs.fromRef.resetFields()
      // 将数据初始化,表单就会清空
      // this.form = this.$options.data().form
      // 需要清空一下这个id,不然在进行添加这个id会一直存在就一直编辑
      // this.$emit('update:edit-id', null)
    },
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>
<style lang='scss'  >
 .goodsDerive-basic{
  .el-dialog{
    border-radius: 10px;
    padding: 20px;
  .el-input__inner{
      width: 396px;
    }
    .el-textarea{
      width: 88%;
    }
  }
  .goodsDerive-input-num{
    .el-input-number{
      width: 396px;
    }
  }
  .upload-demo{
  .el-upload-dragger{
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  }
}
</style>
